<template>
    <!-- From Uiverse.io by HetPatel69 -->
    <ul class="menu">
        <li class="value top">
            <a-avatar v-if="userInfo.avatar != null" :src="baseURL + userInfo.avatar" shape="square" :size="45" />
            <a-avatar v-else shape="square" :size="45" :style="{ backgroundColor: '#EDEDED', verticalAlign: 'middle' }">
                <template #icon>
                    <UserOutlined />
                </template>
                <span>{{ userInfo.nickname }}</span>
            </a-avatar>
        </li>
        <li class="value">
            <router-link to="/main">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path fill="#7D8590"
                        d="M5 18v3.766l1.515-.909L11.277 18H16c1.103 0 2-.897 2-2V8c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h1zM4 8h12v8h-5.277L7 18.234V16H4V8z">
                    </path>
                    <path fill="#7D8590"
                        d="M20 2H8c-1.103 0-2 .897-2 2h12c1.103 0 2 .897 2 2v8c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2z">
                    </path>
                </svg>
            </router-link>
        </li>
        <li class="value">
            <a-badge :dot="pending_dot_status">
                <router-link to="/main/friend">
                    <svg t="1755848974817" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        p-id="1776">
                        <path
                            d="M441.390545 538.833455A150.830545 150.830545 0 0 1 395.636364 430.545455c0-83.409455 67.863273-151.272727 151.272727-151.272728s151.272727 67.863273 151.272727 151.272728a150.830545 150.830545 0 0 1-45.754182 108.288C721.221818 576.372364 768 649.378909 768 733.090909a34.909091 34.909091 0 0 1-69.818182 0c0-83.409455-67.863273-151.272727-151.272727-151.272727a151.458909 151.458909 0 0 0-151.272727 151.272727 34.909091 34.909091 0 0 1-69.818182 0c0-83.712 46.778182-156.718545 115.572363-194.257454zM221.090909 558.545455h-139.636364a34.909091 34.909091 0 0 1 0-69.818182h139.636364a34.909091 34.909091 0 0 1 0 69.818182z m0-151.272728h-139.636364a34.909091 34.909091 0 0 1 0-69.818182h139.636364a34.909091 34.909091 0 0 1 0 69.818182z m0 302.545455h-139.636364a34.909091 34.909091 0 0 1 0-69.818182h139.636364a34.909091 34.909091 0 0 1 0 69.818182zM853.410909 1000.727273H240.407273A124.183273 124.183273 0 0 1 116.363636 876.683636V791.272727a34.909091 34.909091 0 0 1 69.818182 0v85.410909A54.272 54.272 0 0 0 240.407273 930.909091h613.003636A54.272 54.272 0 0 0 907.636364 876.683636V170.589091A54.272 54.272 0 0 0 853.410909 116.363636H240.407273A54.272 54.272 0 0 0 186.181818 170.589091V256a34.909091 34.909091 0 0 1-69.818182 0V170.589091A124.183273 124.183273 0 0 1 240.407273 46.545455h613.003636A124.183273 124.183273 0 0 1 977.454545 170.589091v706.094545A124.183273 124.183273 0 0 1 853.410909 1000.727273zM546.909091 349.090909c-44.916364 0-81.454545 36.538182-81.454546 81.454546s36.538182 81.454545 81.454546 81.454545 81.454545-36.538182 81.454545-81.454545-36.538182-81.454545-81.454545-81.454546z"
                            fill="#7D8590" p-id="1777"></path>
                    </svg>
                </router-link>
            </a-badge>
        </li>
        <li class="value">
            <svg t="1755849161501" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3381">
                <path
                    d="M512 63.715556c-18.204444 0-34.133333 0-50.062222 2.275555-40.96 4.551111-79.644444 15.928889-116.053334 29.582222 0 0 304.924444 300.373333 311.751112 311.751111v-318.577777c-47.786667-15.928889-95.573333-25.031111-145.635556-25.031111z m318.577778 131.982222c-11.377778-11.377778-25.031111-22.755556-38.684445-34.133334-31.857778-25.031111-65.991111-45.511111-104.675555-61.44 0 0 2.275556 427.804444 0 441.457778l227.555555-227.555555c-20.48-43.235556-50.062222-84.195556-84.195555-118.328889z m100.124444 154.737778S630.328889 655.36 618.951111 662.186667h320.853333c15.928889-45.511111 25.031111-95.573333 25.031112-143.36 0-18.204444 0-34.133333-2.275556-50.062223-6.826667-43.235556-18.204444-81.92-31.857778-118.328888zM484.693333 696.32l227.555556 227.555556c43.235556-22.755556 84.195556-50.062222 118.328889-84.195556 40.96-40.96 72.817778-88.746667 95.573333-141.084444 0-2.275556-427.804444 0-441.457778-2.275556z m-118.328889-72.817778v320.853334c63.715556 20.48 129.706667 29.582222 195.697778 20.48 40.96-4.551111 79.644444-13.653333 116.053334-29.582223 2.275556 2.275556-302.648889-300.373333-311.751112-311.751111z m-31.857777-131.982222l-227.555556 227.555556c4.551111 9.102222 9.102222 18.204444 13.653333 25.031111 27.306667 50.062222 65.991111 93.297778 109.226667 127.431111 31.857778 25.031111 65.991111 45.511111 104.675556 61.44 0 0-2.275556-427.804444 0-441.457778z m-257.137778-91.022222c-11.377778 38.684444-15.928889 77.368889-15.928889 116.053333 0 18.204444 0 34.133333 2.275556 50.062222 4.551111 40.96 13.653333 79.644444 29.582222 116.053334 0 0 300.373333-304.924444 311.751111-311.751111H84.195556c-2.275556 11.377778-4.551111 20.48-6.826667 29.582222z m209.351111-273.066667c-34.133333 20.48-65.991111 43.235556-93.297778 70.542222-40.96 40.96-72.817778 88.746667-95.573333 141.084445 0 0 427.804444-2.275556 441.457778 0l-227.555556-227.555556c-9.102222 6.826667-18.204444 11.377778-25.031111 15.928889z m0 0"
                    fill="#7D8590" p-id="3382"></path>
            </svg>
        </li>
        <li class="value footer">
            <svg fill="none" viewBox="0 0 24 25" xmlns="http://www.w3.org/2000/svg">
                <path clip-rule="evenodd"
                    d="m11.9572 4.31201c-3.35401 0-6.00906 2.59741-6.00906 5.67742v3.29037c0 .1986-.05916.3927-.16992.5576l-1.62529 2.4193-.01077.0157c-.18701.2673-.16653.5113-.07001.6868.10031.1825.31959.3528.67282.3528h14.52603c.2546 0 .5013-.1515.6391-.3968.1315-.2343.1117-.4475-.0118-.6093-.0065-.0085-.0129-.0171-.0191-.0258l-1.7269-2.4194c-.121-.1695-.186-.3726-.186-.5809v-3.29037c0-1.54561-.6851-3.023-1.7072-4.00431-1.1617-1.01594-2.6545-1.67311-4.3019-1.67311zm-8.00906 5.67742c0-4.27483 3.64294-7.67742 8.00906-7.67742 2.2055 0 4.1606.88547 5.6378 2.18455.01.00877.0198.01774.0294.02691 1.408 1.34136 2.3419 3.34131 2.3419 5.46596v2.97007l1.5325 2.1471c.6775.8999.6054 1.9859.1552 2.7877-.4464.795-1.3171 1.4177-2.383 1.4177h-14.52603c-2.16218 0-3.55087-2.302-2.24739-4.1777l1.45056-2.1593zm4.05187 11.32257c0-.5523.44772-1 1-1h5.99999c.5523 0 1 .4477 1 1s-.4477 1-1 1h-5.99999c-.55228 0-1-.4477-1-1z"
                    fill="#7D8590" fill-rule="evenodd"></path>
            </svg>
        </li>
        <li class="value footer">
            <svg id="Line" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                <path fill="#7D8590" id="XMLID_1646_"
                    d="m17.074 30h-2.148c-1.038 0-1.914-.811-1.994-1.846l-.125-1.635c-.687-.208-1.351-.484-1.985-.824l-1.246 1.067c-.788.677-1.98.631-2.715-.104l-1.52-1.52c-.734-.734-.78-1.927-.104-2.715l1.067-1.246c-.34-.635-.616-1.299-.824-1.985l-1.634-.125c-1.035-.079-1.846-.955-1.846-1.993v-2.148c0-1.038.811-1.914 1.846-1.994l1.635-.125c.208-.687.484-1.351.824-1.985l-1.068-1.247c-.676-.788-.631-1.98.104-2.715l1.52-1.52c.734-.734 1.927-.779 2.715-.104l1.246 1.067c.635-.34 1.299-.616 1.985-.824l.125-1.634c.08-1.034.956-1.845 1.994-1.845h2.148c1.038 0 1.914.811 1.994 1.846l.125 1.635c.687.208 1.351.484 1.985.824l1.246-1.067c.787-.676 1.98-.631 2.715.104l1.52 1.52c.734.734.78 1.927.104 2.715l-1.067 1.246c.34.635.616 1.299.824 1.985l1.634.125c1.035.079 1.846.955 1.846 1.993v2.148c0 1.038-.811 1.914-1.846 1.994l-1.635.125c-.208.687-.484 1.351-.824 1.985l1.067 1.246c.677.788.631 1.98-.104 2.715l-1.52 1.52c-.734.734-1.928.78-2.715.104l-1.246-1.067c-.635.34-1.299.616-1.985.824l-.125 1.634c-.079 1.035-.955 1.846-1.993 1.846zm-5.835-6.373c.848.53 1.768.912 2.734 1.135.426.099.739.462.772.898l.18 2.341 2.149-.001.18-2.34c.033-.437.347-.8.772-.898.967-.223 1.887-.604 2.734-1.135.371-.232.849-.197 1.181.089l1.784 1.529 1.52-1.52-1.529-1.784c-.285-.332-.321-.811-.089-1.181.53-.848.912-1.768 1.135-2.734.099-.426.462-.739.898-.772l2.341-.18h-.001v-2.148l-2.34-.18c-.437-.033-.8-.347-.898-.772-.223-.967-.604-1.887-1.135-2.734-.232-.37-.196-.849.089-1.181l1.529-1.784-1.52-1.52-1.784 1.529c-.332.286-.81.321-1.181.089-.848-.53-1.768-.912-2.734-1.135-.426-.099-.739-.462-.772-.898l-.18-2.341-2.148.001-.18 2.34c-.033.437-.347.8-.772.898-.967.223-1.887.604-2.734 1.135-.37.232-.849.197-1.181-.089l-1.785-1.529-1.52 1.52 1.529 1.784c.285.332.321.811.089 1.181-.53.848-.912 1.768-1.135 2.734-.099.426-.462.739-.898.772l-2.341.18.002 2.148 2.34.18c.437.033.8.347.898.772.223.967.604 1.887 1.135 2.734.232.37.196.849-.089 1.181l-1.529 1.784 1.52 1.52 1.784-1.529c.332-.287.813-.32 1.18-.089z">
                </path>
                <path id="XMLID_1645_" fill="#7D8590"
                    d="m16 23c-3.859 0-7-3.141-7-7s3.141-7 7-7 7 3.141 7 7-3.141 7-7 7zm0-12c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z">
                </path>
            </svg>
        </li>
    </ul>
</template>

<script setup>
import { ref, onMounted, watchEffect } from 'vue'
import { GetUserInfo_API } from '@/api/user.js'
import { UserOutlined } from '@ant-design/icons-vue';
import { useStatusStore } from '@/pinia/useStatusStore.js'

const baseURL = import.meta.env.VITE_API_BASE_URL
const statusStore = useStatusStore()

const pending_dot_status = ref(false)
const userInfo = ref({})

const getUserInfo = async () => {
    const { data: res } = await GetUserInfo_API()
    userInfo.value = res.data
}

watchEffect(() => {
    pending_dot_status.value = statusStore.pending_dot_status
})

onMounted(() => {
    getUserInfo()
})
</script>

<style scoped>
.top {
    position: relative;
    top: -50px;
}

.footer {
    position: relative;
    bottom: -200px;
}

/* From Uiverse.io by HetPatel69 */
.menu {
    display: flex;
    flex-direction: column;
    width: 65px;
    height: 100%;
    background-color: #232323;
    justify-content: center;
    position: relative;
    list-style: none;
    /* 可拖动区域 */
    -webkit-app-region: drag;
}

.value {
    background-color: transparent;
    border: none;
    padding: 10px;
    color: #727475;
    display: flex;
    gap: 5px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    position: relative;
    -webkit-app-region: no-drag;
}

.value:not(:active):hover,
.value:focus {
    background-color: #21262C;
}

.value:focus,
.value:active {
    background-color: #1A1F24;
    outline: none;
}

.value::before {
    content: "";
    position: absolute;
    top: 5px;
    left: -10px;
    width: 5px;
    height: 80%;
    background-color: #2F81F7;
    border-radius: 5px;
    opacity: 0;
}

.value:focus::before,
.value:active::before {
    opacity: 1;
}

.value svg {
    width: 15px;
}

.value a {
    outline: none;
    border: none;
}

/* .value svg:hover path {
    fill: white;
} */

.menu:hover>:not(.value:hover) {
    transition: 300ms;
    filter: blur(1px);
    transform: scale(0.95, 0.95);
}
</style>
